<template>
	<view class="home-activity-box">
		<view class="home-activity">
			<view class="coupon-list" v-if="shopCouponList.length>0&&!showActivity"  @click="showCoupon = true">
				<tag :couponList="shopCouponList" type="coupon"/>
			</view>
			<!-- <view class="activity-explain"  v-if="shopActivityList.length>0&&!showActivity">
				<text class="activity-label">活动说明：</text>
				<view class="activity-intro">{{shopActivityList[0].showDescription}}</view>
				<view class="activity-more" @click="showHideActivity(true)">{{shopActivityList.length}}种优惠<u-icon size="28" color="#999" name="arrow-down" class="activity-icon"></u-icon></view>
			</view> -->
			<view class="activity-explain"  v-if="!showActivity">
				<text class="activity-label" v-if="shopActivityList[0].showDescription">活动说明：</text>
				<view class="activity-intro">{{shopActivityList[0].showDescription}}</view>
				<view class="activity-more" @click="showHideActivity(true)">更多信息<u-icon size="28" color="#999" name="arrow-down" class="activity-icon"></u-icon></view>
			</view>
			<view class="activity-content" v-if="showActivity">
				<view class="activity-title" v-if="shopActivityList.length>0">店铺优惠</view>
				<view class="activity-list" v-for="(item, index) in shopActivityList" :key="index">
					<view class="activity-list-left">
						<actTag :type="item.activityType" :custom-style="{marginRight:'24rpx'}" />
					</view>
					<view class="activity-text">
						{{item.showDescription}}
					</view>
				</view>
				<view class="activity-title">店铺信息</view>
				<view class="shop-info-box">
					<view class="info-item">
						<view class="info-label">
							店铺公告：
						</view>
						<view class="info-val">
							{{storeInfo&&storeInfo.description}}
						</view>
					</view>
					<!-- <view class="info-item">
						<view class="info-label">
							商品数量：
						</view>
						<view class="info-val">
							{{storeInfo&&storeInfo.goodsNum}}
						</view>
					</view> -->
					<view class="info-item">
						<view class="info-label">
							店铺名称：
						</view>
						<view class="info-val">
							{{storeInfo&&storeInfo.storeName}}
						</view>
					</view>
					<view class="info-item">
						<view class="info-label">
							营业时间：
						</view>
						<view class="info-val">
							{{storeInfo&&storeInfo.storeServiceTime}}
						</view>
					</view>
					<view class="info-item">
						<view class="info-label">
							店铺地址：
						</view>
						<view class="info-val">
							{{storeInfo&&storeInfo.storeAddress}}
						</view>
					</view>
					<view class="info-item" v-if="storeInfo.storeTel" @click="callPhone(storeInfo.storeTel)">
						<view class="info-label">
							店铺电话：
						</view>
						<view class="info-val">
							{{storeInfo&&storeInfo.storeTel}}
						</view>
					</view>
				</view>
				<view class="up-icon" @click="showHideActivity(false)">
					<u-image width="64rpx" height="64rpx" src="@/static/images/up.png"></u-image>
				</view>
				
			</view>
		</view>
		<!-- <u-popup v-model="showActivity" mode="bottom" border-radius="16"  height="70%" :closeable="true" close-icon="close-circle" close-icon-size="48" close-icon-color="#BFBFBF">
			<view class="pop-content-box">
				<scroll-view scroll-y="true" style="height: 100%">
					<view class="pop-content">
						<view class="pop-content-title">更多信息</view>
						<view class="pop-body">
							<view class="activity-list" v-for="(item, index) in shopActivityList" :key="index">
								<view class="activity-list-left">
									<actTag :type="item.activityType" :custom-style="{marginRight:'24rpx'}" />
								</view>
								<view class="activity-text">
									{{item.showDescription}}
								</view>
							</view>
							<view class="shop-info-box">
								<view class="info-item">
									<view class="info-label">
										店铺名称：
									</view>
									<view class="info-val">
										{{storeInfo&&storeInfo.storeName}}
									</view>
								</view>
								<view class="info-item">
									<view class="info-label">
										店铺地址：
									</view>
									<view class="info-val">
										{{storeInfo&&storeInfo.storeAddress}}
									</view>
								</view>
								<view class="info-item" v-if="storeInfo.storeTel" @click="callPhone(storeInfo.storeTel)">
									<view class="info-label">
										店铺电话：
									</view>
									<view class="info-val">
										{{storeInfo&&storeInfo.storeTel}}
									</view>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</u-popup> -->
		<u-popup v-model="showCoupon" mode="bottom" border-radius="16" :closeable="true" close-icon="close-circle" close-icon-size="48" close-icon-color="#BFBFBF">
			<view class="pop-content-box">
				<scroll-view scroll-y="true" style="height: 100%">
					<view class="pop-content">
						<view class="pop-content-title">可领取优惠券</view>
							<view class="pop-body">
								<scroll-view scroll-y="true" class="scroll-Y">
									<view class="coupon-class platform-coupon">
										<view class="u-m-t-24" v-for="(item,index) in shopCouponList" :key="index">
											<coupon :coupon="item" :type="item.isReceive == 1?1:4" @afterSave="afterSave" :dot-style="{backgroundColor:'#f6f6f6'}"/>
										</view>
									</view>
								</scroll-view>
								<view class="coupon-more" @click="$u.route('/pages/activity/coupon')">查看全部优惠券<u-icon size="28" color="#999" name="arrow-right" class="coupon-more-icon"></u-icon></view>
							</view>
					</view>
				</scroll-view>
			</view>
		</u-popup>
	</view>
	
</template>

<script>
	import { mapActions, mapState } from 'vuex';
	import Img from '@/components/goods/img.vue'
	import tag from '@/components/activity/tag.vue'
	import actTag from '@/components/activity/actTag.vue'
	import coupon from '@/components/cart/coupon.vue'
	export default {
		components:{Img, tag, actTag, coupon},
		props:{
			storeInfo:{
				type:Object,
				default:()=>{}
			}
		},
		data() {
			return {
				showActivity:false,
				showCoupon:false,
			}
		},
		computed:{
			...mapState({
				shopActivityList: state => state.activity.shopActivityList,
				shopCouponList: state => state.activity.shopCouponList,
			})
		},
		created() {
			this.ActGetAllActivity({storeId:uni.getStorageSync('storeId'),isCoupon:0,isAll:1})
			this.ActGetAllActivity({storeId:uni.getStorageSync('storeId'),isCoupon:1,isAll:0})
		},
		mounted() {
			console.log(this.shopActivityList)
		},
		methods: {
			...mapActions(['ActGetAllActivity']),
			callPhone(num){
				uni.makePhoneCall({
				    phoneNumber: num //仅为示例
				});
			},
			afterSave(){
				this.ActGetAllActivity({storeId:uni.getStorageSync('storeId'),isCoupon:1,isAll:0})
			},
			showHideActivity(key){
				this.showActivity = key
				this.$emit('showActivity',key)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.coupon-list{
		display: flex;
		margin-top:20rpx;
		margin-bottom: 20rpx;
	}
	.activity-explain{
		display: flex;
		color:$u-content-color;
		font-size: 24rpx;
	}
	.activity-intro{
		flex:1;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		margin-right:10rpx;
	}
	.activity-icon{
		margin-left:14rpx;
	}
	.pop-content-box{
		height:100%;
		overflow-y: auto;
		.pop-body{
			padding:0 24rpx;
			.scroll-Y{
				max-height: 80vh;
			}
			.coupon-class{
				margin-bottom:48rpx;
				.coupon-class-name{
					margin-bottom: 24rpx;
					font-size:26rpx;
					color:$u-main-color;
					font-weight: 700;
				}
				.coupon-box{
					.coupon-item{
						overflow: hidden;
						position: relative;
						margin-bottom:16rpx;
						&:before,&:after{
							content: '';
							display: block;
							width:20rpx;
							height:20rpx;
							border-radius: 50%;
							// border:1rpx solid $u-type-error;
							border: 1px solid rgba(255,79,57,0.20);
							position: absolute;
							right:168rpx;
							background-color: #fff;
						}
						&:before{
							top:-10rpx;
						}
						&:after{
							bottom:-10rpx;
						}
						.coupon-item-border{
							display: flex;
							background-color: #FFF7E9;
							border-radius: 8rpx;
							// border:1rpx solid $u-type-error;
							border: 2rpx solid rgba(255,79,57,0.20);
							padding:8rpx 16rpx 8rpx 8rpx;
							.coupon-left{
								width:200rpx;
								height:160rpx;
								display: flex;
								flex-direction:column;
								align-items: center;
								justify-content: center;
								text-align: center;
								color:#fff;
								background-color: $u-type-error;
								border-radius: 8rpx;
								.left-top{
									margin-bottom:10rpx;
									.price-sign{
										font-size: 24rpx;
									}
									.price-val{
										font-size: 44rpx;
										font-weight: 700;
									}
								}
								.left-bottom{
									font-size: 24rpx;
								}
							}
							.coupon-center{
								flex:1;
								padding-left:16rpx;
								display: flex;
								flex-direction:column;
								// align-items: center;
								justify-content: center;
								.coupon-type{
									font-size: 32rpx;
									color:$u-main-color;
									font-weight: 700;
									margin-bottom: 32rpx;
								}
								.coupon-tip{
									font-size: 24rpx;
									color:$u-content-color;
								}
							}
							.coupon-right{
								padding-top:48rpx;
								padding-left:16rpx;
								// border-left:1rpx dashed $u-type-error;
								border-left: 2rpx dashed rgba(255,79,57,0.20);
								.coupon-btn{
									width:146rpx;
									height:64rpx;
									border-radius: 86rpx;
									text-align: center;
									line-height: 64rpx;
									font-size: 24rpx;
									color:#fff;
								}
								.coupon-btn-can{
									background-color: $u-type-error;
								}
								.coupon-btn-no{
									background-color: $u-tips-color;
								}
							}
						}
					}
				}
			}
			.coupon-more{
				text-align: center;
				padding-bottom: 48rpx;
				color:$u-content-color;
				font-size: 24rpx;
			}
		}
		.pop-content-title{
			width:100%;
			text-align: center;
			font-size: 32rpx;
			color:$u-main-color;
			font-weight: 700;
			padding-top:32rpx;
			padding-bottom: 40rpx;
		}
		.activity-list{
			display: flex;
			margin-bottom:16rpx;
			align-items: center;
			.activity-list-left{
				align-self:flex-start;
			}
		}
	}
	.activity-type{
		background: linear-gradient(115.04deg, #F16500 0%, #FF0000 100%);
		height:32rpx;
		line-height: 32rpx;
		border-radius: 4rpx;
		color:#fff;
		margin-right:16rpx;
		padding:0 8rpx;
		font-size: 24rpx;
	}
	.activity-text{
		flex: 1;
		font-size: 24rpx;
		color:$u-content-color;
		// overflow: hidden;
		// white-space: nowrap;
		// text-overflow: ellipsis;
	}
	.shop-info-box{
		.info-item{
			// padding:10rpx 0;
			display: flex;
			font-size: 24rpx;
			color:$u-content-color;
			margin-bottom: 20rpx;
		}
	}
	.activity-content{
		padding-bottom:60rpx;
		.activity-title{
			color:$u-main-color;
			font-size: 28rpx;
			margin-bottom: 36rpx;
			font-weight: 700;
			margin-top:52rpx;
		}
		.activity-list{
			display: flex;
			margin-bottom:16rpx;
			align-items: center;
			.activity-list-left{
				align-self:flex-start;
			}
		}
		.up-icon{
			width:72rpx;
			height:72rpx;
			margin:0 auto;
			margin-top:120rpx;
			margin-bottom: 50rpx;
		}
	}
</style>
